<template>
  <!--投诉公示-->
  <div class="container">
    <div class="header">
      <loginHeader
        :isShowType="isShowType"
        :activeIndex="activeIndex"
        :isShowToHome="true"
      ></loginHeader>
    </div>
    <div class="main">
      <div class="bannerbox">
        <div class="banner">
          <img src="../../../static/img/common/complaintBannerYS.png" />
        </div>
      </div>
      <div class="mainContent">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="在线投诉" name="first">
            <complaintOnline v-if="isShowFirst"></complaintOnline>
          </el-tab-pane>
          <el-tab-pane label="在线举报" name="second">
            <reportOnline v-if="isShowSecond"></reportOnline>
          </el-tab-pane>
          <el-tab-pane label="进度查询" name="third">
            <progressSearch v-if="isShowThird"></progressSearch>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import loginHeader from '@/components/publicCom/loginHeader'
import complaintOnline from '@/components/common/complaintOnline'
import reportOnline from '@/components/common/reportOnline'
import progressSearch from '@/components/common/progressSearch'
import common from '../../kits/common'

export default {
  name: 'complaintPublicityYS',
  components: {
    loginHeader,
    complaintOnline,
    reportOnline,
    progressSearch,
  },
  data() {
    return {
      isShowType: false,
      activeIndex: '2',
      activeName: 'first',
      isShowFirst: true,
      isShowSecond: false,
      isShowThird: false,
    }
  },
  created() {},
  methods: {
    //切换tab同时清空验证
    handleClick(tab, event) {
      if (tab.label == '在线投诉') {
        this.isShowFirst = true
        this.isShowSecond = false
        this.isShowThird = false
      } else if (tab.label == '在线举报') {
        // this.isShowSecond = true;
        this.isShowFirst = false
        this.isShowSecond = true
        this.isShowThird = false
      } else if (tab.label == '进度查询') {
        // this.isShowThird = true;
        this.isShowFirst = false
        this.isShowSecond = false
        this.isShowThird = true
      }
    },
  },
}
</script>

<style scoped lang="less">
.header {
  position: absolute;
  top: 0;
  width: 100%;
  background: #08205c;
  background: linear-gradient(
    left,
    #08205c 0%,
    #0f4d9a 10%,
    #0f4d9a 90%,
    #08205c 100%
  );
  height: 64px;
}
.bannerbox {
  width: 100%;
  height: 240px;
  img {
    width: 100%;
    height: 240px;
  }
}
.main {
  width: 100%;
  overflow: auto;
  top: 64px;
  position: absolute;
  bottom: 0px;
  .mainContent {
    margin: 24px 0;
    padding: 0 160px;
    /deep/ .el-tabs__item {
      font-size: 20px;
      color: #4d81aa;
    }
    /deep/ .el-tabs__item.is-active {
      font-weight: bold;
    }
    /deep/ .el-tabs__active-bar {
      height: 4px;
      background: #4d81aa;
    }
  }
  @media screen and (min-width: 1024px) and (max-width: 1300px) {
    .mainContent {
      padding: 0 50px;
    }
  }
}
</style>
